<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设备图谱</title>
    <style>
        .bg{
            background: url("./bg_1.jpg") no-repeat ;
            background-size: 100% 100%;
            overflow: hidden;
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="stars star1"></div>
    <div class="stars star2"></div>
    <div class="stars star3"></div>
    <div class="stars star4"></div>
    <div class="stars star5"></div>
    <div class="stars star6"></div>
    <div class="bg" id="homepageBg">
    </div>

    <!--详情-->
    <div class="hw-overlay" id="hw-layer">
        <div class="hw-layer-wrap">
            <a class="close" id="close"></a>
            <div class="title" id="d_equipment_name"></div>
            <div class="tab-area" id="tab-area">
                <div class="tab tab-1 tab-current" id="tab-1">全息地图</div>
                <div class="tab tab-2" id="tab-2">全生命周期</div>
            </div>
            <div class="container" id="layerContainer">
                <div class="chartContainer" id="chartContainer">
                    <div class="equipment-charts" id="content-2">
                        <div class="slide-left">
                            <div class="chart-curve" id="chart-curve">
                                <p class="title">全生命周期</p>
                                <div class="worth" id="worth">
                                    <i class="icon1"></i>
                                    <span class="span1">报废年限</span>
                                    <div class="value" id="scrapYear">
                                    </div>
                                    <span class="span1 spanMark">年</span>
                                </div>
                                <div class="chart" id="chart-box-1">
                                    <svg id="chart-1">
                                        <defs>

                                            <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">

                                                <stop offset="0%" style="stop-color:#70DAFD;stop-opacity:0.4" />

                                                <stop offset="100%" style="stop-color:#70DAFD;stop-opacity:0.1" />

                                            </linearGradient>

                                        </defs>
                                    </svg>
                                </div>
                            </div>
                            <div class="chart-curve" id="chart-valuation">
                                <p class="title">设备估值</p>
                                <div class="worth" id="valuation">
                                    <i class="icon2"></i>
                                    <span class="span1">设备估值</span>
                                    <div class="value" id="equipmentValueMin">
                                    </div>
                                    <span class="span1 spanMark">～</span>
                                    <div class="value" id="equipmentValueMax">
                                    </div>
                                    <span class="span1 spanMark">元</span>
                                </div>
                                <div class="chart" id="chart-box-2">
                                    <svg id="chart-2">

                                    </svg>
                                </div>
                            </div>
                        </div>
                        <div class="slide-right" id="slide-right">
                        </div>
                    </div>
                    <div class="equipment-map" id="content-1">
                        <div class="deviceMap">
                            <svg class="map mapSvg" width="100%" height="100%">
                                <defs>
                                    <filter id="glow">
                                        <feGaussianBlur class="blur" stdDeviation="25.5" result="coloredBlur" filterUnits="userSpaceOnUse"></feGaussianBlur>
                                        <feMerge>
                                            <feMergeNode in="coloredBlur"></feMergeNode>
                                            <feMergeNode in="SourceGraphic"></feMergeNode>
                                        </feMerge>
                                    </filter>

                                    <filter id="blue-glow" x="-5000%" y="-5000%" width="10000%" height="10000%">
                                        <feFlood result="flood" flood-color="#47a6ff" flood-opacity="1"></feFlood>
                                        <feComposite in="flood" result="mask" in2="SourceGraphic" operator="in"></feComposite>
                                        <feMorphology in="mask" result="dilated" operator="dilate" radius="2.5"></feMorphology>
                                        <feGaussianBlur in="dilated" result="blurred" stdDeviation="10"></feGaussianBlur>
                                        <feMerge>
                                            <feMergeNode in="blurred"></feMergeNode>
                                            <feMergeNode in="SourceGraphic"></feMergeNode>
                                        </feMerge>
                                    </filter>

                                </defs>

                                <defs>
                                    <filter id="glow_line">
                                        <feGaussianBlur class="blur" stdDeviation="10" result="coloredBlur" filterUnits="userSpaceOnUse"></feGaussianBlur>
                                        <feMerge>
                                            <feMergeNode in="coloredBlur"></feMergeNode>
                                            <feMergeNode in="SourceGraphic"></feMergeNode>
                                        </feMerge>
                                    </filter>
                                </defs>

                                <defs>
                                    <filter id="glow_line2">
                                        <feGaussianBlur class="blur" stdDeviation="1.5" result="coloredBlur" filterUnits="userSpaceOnUse"></feGaussianBlur>
                                        <feMerge>
                                            <feMergeNode in="coloredBlur"></feMergeNode>
                                            <feMergeNode in="SourceGraphic"></feMergeNode>
                                        </feMerge>
                                    </filter>
                                </defs>
                            </svg>
                            <div class="content_right">
                                <div class="device_back detail_container">
                                    <div class="device_detail">
                                        <div class="device_detail_title">
                                            设备描述
                                        </div>
                                        <div class="device_detail_content"></div>
                                    </div>
                                </div>
                                <div class="device_back">
                                    <div class="device_spread">
                                        <div class="left_circle"></div>
                                        <div class="spread_title">全国</div>
                                        <div class="spread_container">
                                            <div class="spread_content">
                                                <div class="slide_content">
                                                    <div class="brand_title">品牌占比分布</div>
                                                    <div class="brand_radar" id="brand_spread"></div>
                                                </div>
                                                <div class="slide_content" id="age_spread"></div>
                                            </div>
                                            <div class="spread_lend">
                                                <div class="lend_dot active"></div>
                                                <div class="lend_dot"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="noticeContainer" id="noticeContainer">
                    <!--<div class="loader"></div>-->
                    <div class="loading_1">
                        <div class="loading_2"></div>
                    </div>
                    <p class="loading_p">加载中</p>
                </div>
            </div>
        </div>
    </div>


<!--ie8及以下版本提示-->
<div class="notice_con" id="ie_notice_layer">
    <p class="p1">你知道你的Internet Explorer已经过时了吗？</p>
    <p class="p2">为了更好的体验，请使用以下版本浏览器！</p>
</div>
</body>
<script>
    var userAgent = navigator.userAgent
    if(userAgent.indexOf("MSIE")>0 && (userAgent.indexOf("MSIE 6.0")>0) || userAgent.indexOf("MSIE 7.0")>0 || userAgent.indexOf("MSIE 8.0")>0) {
        document.getElementById('ie_notice_layer').style.display = 'block'
    }
</script>



</html>